import { color } from "echarts";
import { defineStore } from "pinia";
import { reactive } from "vue";
import * as echarts from "echarts";
import { getWoundedStatistics } from "@/utils/api/wounded";
import { ref } from "vue";
const options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "#081d2580", //背景颜色
    borderColor: "#08a895", //边框颜色
    textStyle: {
      color: " #e6f7ff", //文本颜色
      fontSize: "2.4rem",
      align: "left", //文本对齐方式
    },
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#081d2530",
      },
    },
  }, //提示框设置
  legend: {},
  yAxis: {
    show: true,
    name: "位",
    splitLine: {
      //设置条纹显示 柱状图默认yAxis(true)
      show: true,
      //设置lineStyle即可写入样式即可
      lineStyle: {
        //这里输入线条的样式
        color: "#e6f7ff80",
        type: "dashed",
        width: 1,
      },
    },
    nameTextStyle: {
      color: "#d9f8ff",
    },
    axisLabel: {
      color: "#d9f8ff",
    },
  },

  xAxis: {
    type: "category",
    show: true,
    data: [],
    axisLabel: {
      color: "#d9f8ff",
    },
  },
  series: [
    {
      data: [],
      type: "bar",

      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: "#1891FE" }, // 0%处的颜色
          { offset: 0.5, color: "#0BB3F8" }, // 50%处的颜色
          { offset: 1, color: "#73E6FF" }, // 100%处的颜色
        ]),
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: "#73E6FF" }, // 0%处的颜色
            { offset: 0.5, color: "#0BB3F8" }, // 50%处的颜色
            { offset: 1, color: "#1891FE" }, // 100%处的颜色
          ]),
        },
      },
    },
  ],
};
export const useWoundedStore = defineStore(
  "wounded",
  () => {
    //echarts图表数据
    const echartsOptions: any = reactive(options);
    //伤亡组 数据
    const woundedData: any = reactive({ list: [] });
    //伤员分类 数据
    const woundedCategoryData: any = reactive({
      Slight: {}, //轻伤
      Serious: {}, //重伤
      operation: {}, //手术
      isolate: {}, //隔离
    });
    //总伤员数
    const totalWounded: any = ref(0);
    //获取数据
    const getWoundedData = async () => {
      const res = await getWoundedStatistics({});
      console.log(res?.data);
      if (res?.data) {
        totalWounded.value = res.data?.AllTagNo.TagNo;
        handleEchartsData(res.data?.listTagNo);
        woundedData.list = res.data?.listRoomNo;
        res.data?.listTagType.forEach((item: any) => {
          switch (item.TagType) {
            case "轻伤":
              woundedCategoryData.Slight = item;
              break;
            case "重伤":
              woundedCategoryData.Serious = item;
              break;
            case "手术":
              woundedCategoryData.operation = item;
              break;
            case "隔离":
              woundedCategoryData.isolate = item;
              break;
            default:
              break;
          }
        });
        console.log("woundedCategoryData", woundedCategoryData);
      }
    };
    //处理图表数据
    const handleEchartsData = (data: any) => {
      let xAxisData: any = data?.map((item: any) => item.TagType) || [];
      let seriesData: any = data?.map((item: any) => item.TagNo) || [];
      echartsOptions.xAxis.data = xAxisData;
      echartsOptions.series[0].data = seriesData;
      console.log("echartsOptions", echartsOptions);
    };
    return {
      echartsOptions, //echarts图表数据
      woundedData, //伤亡组 数据
      woundedCategoryData, //伤员分类 数据
      totalWounded, //总伤员数
      getWoundedData,
    };
  },
  {
    persist: {
      storage: {
        setItem(key, value) {
          return localStorage.setItem(key, value);
        },
        getItem(key) {
          return localStorage.getItem(key);
        },
      },
      paths: [],
    },
  }
);
